<template>

				<div class="box box-question">
					<header  class="title-header">
						<h5  class="title">常见问题</h5> 
					</header>
					<div class="panel-content">
						<div class="banner-list clearfix">
							<ul  class="banner-list clearfix">
								<!---->
								<li  class="goumai">
									<h3  class="title">购买指南</h3>
									<!---->
									<ul  class="sub-question clearfix">
										<!---->
										<li >
											<a  href="#">购买渠道</a>
										<li >
											<a  href="#">支付方式</a>
										</li>
										<li >
											<a  href="#">支付时效</a>
										</li>
										<li >
											<a  href="#">分期付款</a>
										</li>
										<li >
											<a  href="#">发票说明</a>
										</li>
										<li >
											<a  href="#">修改发票抬头</a>
										</li>
									</ul>
								</li>
								<li  class="dingdan">
									<h3  class="title">订单物流</h3>
									<!---->
									<ul  class="sub-question clearfix">
										<!---->
										<li >
											<a  href="#">修改订单</a>
										</li>
										<li >
											<a  href="#">发货时效</a>
										</li>
										<li >
											<a  href="#">订单及物流</a>
										</li>
										<li >
											<a  href="#">包邮政策</a>
										</li>
										<li >
											<a  href="#">签收须知</a>
										</li>
									</ul>
								</li>
								<li  class="jishu">
									<h3  class="title">技术支持</h3>
									<!---->
									<ul  class="sub-question clearfix">
										<!---->
										<li >
											<a  href="#">强制重新启动</a>
										</li>
										<li >
											<a  href="#">截屏功能</a>
										</li>
										<li >
											<a  href="#">延长续航时间</a>
										</li>
										<li >
											<a  href="#">定位导航</a>
										</li>
										<li >
											<a  href="#">手机开机激活方法</a>
										</li>
									</ul>
									<ul  class="sub-question clearfix">
										<!---->
										<li >
											<a  href="#">支持耳机接口标准</a>
										</li>
									</ul>
								</li>
								<li  class="shouhou">
									<h3  class="title">售后政策</h3>
									<!---->
									<ul  class="sub-question clearfix">
										<!---->
										<li >
											<a  href="#">手机产品</a>
										</li>
										<li >
											<a  href="#">手机附件</a>
										</li>
										<li >
											<a  href="#">耳机、坚果自拍杆</a>
										</li>
										<li >
											<a  href="#">合作厂商商品</a>
										</li>
										<li >
											<a  href="#">三包权益</a>
										</li>
									</ul>
									<ul  class="sub-question clearfix">
										<!---->
										<li >
											<a  href="#">意外碎屏保修服务</a>
										</li>
										<li >
											<a  href="#">意外损坏保修服务</a>
										</li>
										<li >
											<a  href="#">延长保修服务</a>
										</li>
									</ul>
								</li>
							</ul>
						</div>
					</div>
				</div>

</template>

<script>
</script>

<style>
/*常见问题的样式 start*/
		.content .box {
		    overflow: hidden;
		    z-index: 0;
		    margin-top: 29px;
		    border: 1px solid rgba(0,0,0,.14);
		    border-radius: 8px;
		    background: #fff;
		    box-shadow: 0 3px 8px -6px rgba(0,0,0,.1);
		}
		.box-question .title-header{
			display: block;
		    font-size: 18px;
		    line-height: 60px;
		    color: #9f9f9f;
		    background: #fafafa;
		    border-bottom: 1px solid rgba(0,0,0,.1);
		}
		.box-question .title{			
    		margin-left: 30px;
		}
		.box-question .panel-content{
			    overflow: hidden;
    			transition: all .3s ease-in-out;
		}

		.box-question .banner-list > li {
		    width: 50%;
		    padding: 38px 0 35px 120px;
		    background-repeat: no-repeat;
		    background-size: 54px auto;
		    background-position-x: 35px;
		    background-image: url(http://static.smartisanos.cn/service/assets/images/question-icon.9061b2228768f4b09c58e907f170570b.png);
		    background-image: -webkit-image-set(url(http://static.smartisanos.cn/service/assets/images/question-icon.9061b2228768f4b09c58e907f170570b.png));
		}
		.box .banner-list > li {
		    float: left;
		    box-sizing: border-box;
		    border-right: 1px solid #ececec;
		    border-bottom: 1px solid #ececec;
		}
		.box-question .banner-list > li .title {
		    font-size: 16px;
		    line-height: 1em;
		    margin-bottom: 20px;
		    color: #333;
		}
		.box-question .banner-list > li ul {
		    font-size: 12px;
		    line-height: 1em;
		    color: #999;
		    overflow: hidden;
		    margin-top: 12px;
		}
		.box-question .banner-list > li ul li:first-child {
		    padding-left: 0;
		}
		.box-question .banner-list > li ul li {
		    float: left;
		    padding-left: 16px;
		    position: relative;
		}
		.box-question .banner-list > li ul li:before {
		    content: "\B7";
		    position: absolute;
		    left: 5px;
		}
		.box-question .banner-list > li a {
		    color: #a7a7a7;
		    
		}
		.box-question .banner-list > li a:hover{
			color: #5079d9;
			cursor: pointer;
		    transition: all .15s ease-out;
		    text-decoration: none;
		}
		.box-question .banner-list > li.goumai {
		    background-position-y: 33px;
		}
		.box-question .banner-list > li.dingdan {
		    background-position-y: -232px;
		}
		.box-question .banner-list > li.jishu {
		    background-position-y: -90px;
		}
		.box-question .banner-list > li.shouhou {
		    background-position-y: -344px;
		}
		/*常见问题的样式 end*/
</style>